<template>
  <div class="rechargem">
    <vheader pageTitle="充值"></vheader>
    <ul>
      <li class="border-1px">
        <p>可用余额</p>
        <span :style="{color: '#ff4133'}">{{ balance }}元 </span>
      </li>
      <li class="border-1px">
        <p>充值</p>
        <input type="number" v-model.number="rechargeAmount">
        <span>元</span>
      </li>
    </ul>
    <div class="vbutton-wrapper">
      <vbutton
        text="下一步"
        :loading="loading"
        @click="recharge"></vbutton>
    </div>
    <form :action="action" id="form" method="get">
      <input type="hidden" name="amount" v-model="rechargeAmount">
      <input type="hidden" name="returnUrl" v-model="returnUrl">
      <input type="hidden" name="acctKey" v-model="acctKey">
    </form>

    <span @click="toggle">查看充值说明</span>
    <div class="rechargem-des" v-show="desShow">
      <p>1、请注意单笔充值限额，目前第三方支付默认单笔充值最大金额为10万元，具体额度根据银行和用户设定为准。</p>
      <p>2、①充值未投资的资金，在30天内提现需收取0.3%的手续费。②充值投资后，已回款的资金申请提现，收取1元/笔提现手续费。（此手续费由第三方支付机构收取，并非分秒金融收取的。）</p>
      <p>3、提现到账时间：分秒金融实行提现(T+0)，当天申请的提现当日可到账。</p>
      <p>4、分秒金融禁止使用信用卡进行充值，禁止洗钱、信用卡套现、虚假交易等行为，一经发现并确认，将终止该账户的使用。</p>
    </div>
    <vmask v-show="maskShow"></vmask>
  </div>

</template>

<script>
  import vheader from 'components/common/comHead'
  import { Toast } from 'mint-ui'
  import vbutton from 'components/common/button'
  import vmask from 'components/common/mask'
  import popUp from 'components/common/popup/popup.js'
  import config from '../../config.js'

  export default {
    data () {
      return {
        loading: false,
        acctKey: '',
        desShow: false,
        showInfo: false,
        maskShow: false,
        rechargeAmount: '',
        number_id: '',
        out_trade_no: '',
        amount: '',
        returnUrl: '',
        action: ''
      }
    },
    computed: {
      balance () {
        return this.$store.state.user.balance.toFixed(2)
      }
    },
    created () {
      this.returnUrl = config.RECHARGEOKRETURNURL // 充值成功后返回的地址
      this.acctKey = this.$cookie.get('acctKey')
      this.action = config.RECHARGEACTION // 充值提交的表单地址
    },
    methods: {
      toggle () {
        this.desShow = !this.desShow
      },
      recharge () {
        const that = this
        this.acctKey = this.getUserCookie('acctKey')
        if (this.$store.state.user.openAcctStatus === '0') {
          Toast('充值前需先实名认证')
          return
        }

        // 单笔限制不能超过5000
        if (this.rechargeAmount > 5000) {
          this.maskShow = true
          const popup = popUp({
            container: '.rechargem',
            innerHtml: '<p style="text-align: center">快捷支付单笔限额5000元，单日限额1万元。网银U盾充值不限额。</p>',
            type: 'alert',
            positiveText: '确定'
          })
          popup.positive = () => {
            popup.close()
            that.maskShow = false
          }
          return
        }

        if (this.rechargeAmount > 0) {
          this.loading = true
          document.getElementById('form').submit()
        } else {
          Toast('请输入正确的金额')
        }
      }
    },
    components: {
      vheader,
      Toast,
      vbutton,
      vmask
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .rechargem {
    font-size: 30px;
    color: $base-666;
    text-align: center;
    ul {
      padding: 0 30px;
    }
    .vbutton-wrapper {
      margin: 80px 0 60px 0;
    }
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 108px;
      @include border-1px(#{$base-e5e5e5});
      input {
        outline: none;
        flex: 1 0 auto;
        text-align: right;
        padding-right: 10px;
        font-size: 36px;
        color: $base-666;
      }
    }
    &>span {
      text-decoration: underline;
      font-size: 26px;
      color: $base-ff6c00;
    }
    &-des {
      margin-top: 30px;
      color: $base-ff6c00;
      padding: 0 30px;
      p {
        text-align: left;
        text-indent: 2em;
        font-size: 22px;
        line-height: 46px;
      }
    }
  }
</style>
